<template>
<div id="myBill">
      <!--后退-->
    <div style="height:7%;"><img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)"></div>
    <div class="inAndOut" v-show="inandout">
       <p v-for="(item,index) in outAndInMoney" @click="incomeAndOut($event,item,index)"><span>{{item.text}}</span><span style="display:none" v-bind:class={inOutSpan:item.active}>√</span></p>
    </div>
    <div class="model" v-show="model" @click="disapper"></div>
    <!--筛选-->
    <div class="filter" @click="filter">
        <span >筛选</span>
        <img src="../../../assets/me/goTO.png" alt="">
    </div>
     <div class="quota">
        <p><span style="margin-right:0.5rem;">支出 : {{countData.expensesSum}}</span><span>收入 : {{countData.incomeSum}}</span></p>
    </div>
    <div  v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="10" infinite-scroll-immediate-check="false" class="cardList">
        <section v-for="item in tradeRecored">
            <img style="border-radius:50%;width:2.5rem;height:2.5rem;margin-right:0.5rem;" :src="myUserData.headPortrait" alt="">
            <div class="cardDD">
                <div><p>{{turnPayType(item.transactionType)}}</p><p style="color:#888888;font-size:0.65rem;margin-top:0.25rem;">2018-2-12</p></div>
                <div style="color:green;font-size:0.9rem;;"><span v-if="Number(item.afterMoney)-Number(item.beforeMoney)<0">-{{item.transactionMoney}}</span><span v-if="Number(item.afterMoney)-Number(item.beforeMoney)>0">+{{item.transactionMoney}}</span>￥</div>
            </div>
        </section>

                 <!--底部判断是加载图标还是提示“全部加载”-->
      <div style="text-align: center">
        <mt-spinner style="margin: auto" type="fading-circle" color="#2AA094" :size="20" v-show="queryLoading"></mt-spinner>

        <div v-show="moreLoading">已全部加载</div>
      </div>



    </div>

</div>
</template>
<script>
import turnPayType from '../../../server/payMethod.js'
import turnTime from '../../../server/dataTime.js'
export default {
  data () {
    return {
        outAndInMoney:[
            {text:'收入',active:false},
            {text:'支出',active:false},
            {text:'全部',active:false},
        ],
         topStatus: '',
          //初始化无限加载相关参数
         queryLoading: false,
         moreLoading: false,
         allLoaded: false,
        countData:{},
        turnTime:turnTime,
        inandout:false,
        model:false,
        turnPayType:turnPayType,
        tradeRecored:[],
        forms:{
            bpType:undefined,
            pageNumber:1,
            pageSize:10,
            userId:undefined,
        },
        myUserData:'',
    }
  },
  created(){
      this.curUserSum()
      this.getCurrentUser()
  },
  methods:{
       loadTop(){

                this.tradeRecored = [];
                 this.forms.pageNumber = 1;
                this.getTradeReco();
            },
            handleTopChange(status) {
                this.topStatus = status;

            },
            //无限加载函数
            loadMore() {

                this.forms.pageNumber = Number(this.forms.pageNumber)+1

              this.getTradeReco()

            },
      //  获取当前用户的信息
      getCurrentUser(){
           this.$api.currUser().then((res)=>{
              if(res.code == '000000'){
                  this.myUserData = res.data
                  this.forms.userId = res.data.id
                  this.getTradeReco()
              }
          })
      },
        //  获取总的收入和支出
      curUserSum(){
           this.$api.curUserSum().then((res)=>{
              if(res.code == '000000'){
                  this.countData = res.data
              }
          })
      },
    //   收入支出筛选
    incomeAndOut(e,item,val){
        console.log(val)
         for (var i = 0; i < this.outAndInMoney.length; i++) {
                        this.outAndInMoney[i].active = false;
                    }
                    item.active = true;
        this.inandout = false;
        this.model = false;
        if(val==0){
            this.forms.bpType = 1;
        }
        else if(val==1){
            this.forms.bpType = 2;
        }
        else{
           this.forms.bpType = undefined;
        }
        this.tradeRecored=[]
        this.getTradeReco()
    },
      disapper(){
           this.inandout = false;
           this.model = false;
      },
      filter(){
          this.inandout = !this.inandout;
           this.model = !this.model;
      },
      // 获取交易记录
      getTradeReco(){

        this.queryLoading  = true
          this.$api.getTradeReco(this.forms).then((res)=>{
              if(res.code=='000000'){
                this.queryLoading  = false
                res.data.list.forEach((item)=>{
                    this.tradeRecored.push(item)
                  })
                res.data.totalPage === this.forms.pageNumber ? this.moreLoading = true : this.moreLoading = false
              }
          })
      }
  }
}
</script>
<style>
#myBill .inOutSpan{
   display:inline-block!important;
   float:right;
   margin-right:1.2rem;
}
#myBill .cardDD{
    width:85%;
    height:100%;
    display:flex;
    justify-content: space-between;
    padding-bottom:0.25rem;
    border-bottom: 0.5px solid #badcbe;
}
#myBill .cardList{
  position: absolute;
  top: 9rem;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
    overflow:auto;
    background-color:white;
    padding:0.3rem 1rem 0 1.5rem;
}
#myBill .cardList section{
    display:flex;
    padding:0.25rem;
}
#myBill .quota{
    height:2.5rem;
    line-height:1.5rem;
    padding:0 2rem;
    font-size:1rem;
    margin:1rem 0 0rem 0;
}
#myBill .quota > p{
    width:50%;
    display:flex;
    color:#888888;
    justify-content:space-between;
}
#myBill .inAndOut{
    width:100%;
    height:5rem;
    background-color:white;
    position:absolute;
    top:14%;
    left:0;
    z-index:1111;
}
#myBill .inAndOut p{
    padding-left:1.9rem;
    height:1.5rem;
    line-height:1.5rem;
}

#myBill{
    width:100%;
    height:100%;
    background-color:rgb(248, 248, 248)
}
#myBill .model{
    position:absolute;
    top:14%;
    left:0;
    height:86%;
    width:100%;
    background-color: #000;
    opacity: 0.5;
    z-index:11;
}
  #myBill .back{
    height:1.1rem;
    width:0.6rem;
    margin:1rem 1rem 0rem 1rem;
  }
  #myBill .filter{
      width:100%;
      background-color:white;
      height:7%;
      line-height:2.5rem;
      padding:0 2rem;
      box-shadow:0.05rem 0.05rem 0.8rem 0.05rem #e2e2e2;
      color:#888888;
  }
  #myBill .filter img{
        height:1.1rem;
        width:0.6rem;
        transform:rotate(90deg);
        margin:0 1rem 0 0.75rem;
  }
</style>
